var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var animate=document.getElementById("animate");
var image= new Image();
image.src='image2.jpg';
//获取像素信息
//var imageData=cxt.getImageData(400 ,5,500,500);
//存储像素信息
//构造一个Particles类
/*function Particles(p) {

        this.count=p.count;
        this.canvasId=p.canvasId;
        this.imgUrl=p.imgUrl;
        this.cols=p.cols;
        this.rows=p.rows;
        this.startX=p.startX;
        this.startY=p.startY
        this.delay=p.delay;
        this.duration=p.duration;
        this.interval=p.interval;
        this.fillStyle=p.fillStyle
}
var particles=new Particles({count:100,canvasId:'canvas',
    imgUrl:'image2.jpg',cols:100,rows:100,startX:700,startY:600,imgX:500,imgY:130,
    delay:100,duration:2000,interval:6,fillStyle:'rgba(26,145,211,1)'});*/
var particles=[]
var requestId;
image.onload=function () {
    //加载图片到画布上
    image.w=image.width;
    image.h=image.height;
    image.x=500;
    image.y=5;
    cxt.drawImage(image,400,5,image.w,image.h);
    // 获取图像的像素信息，并根据像素信息重新绘制出粒子，
    // canvas有一个叫getImageData的接口，通过该接口可以获取到画布上指定位置的全部像素的数据
    image.imageData=cxt.getImageData(400,5,image.w,image.h);
    console.log(image.imageData);
    calculate();
    draw();

}
//计算坐标
function calculate() {
    var len =image.imageData.length;
    //保存100行和列的像素值
    var cols=100;  //行
    var rows=100;
    //设成100行100列后每个单元的的宽度
    var s_width=parseInt(image.w/cols);
    var s_height=parseInt(image.h/rows);

    var pos=0;//数组中的位置
    var par_x,par_y;   //粒子的x,y轴
    var data=image.imageData.data;  //像素值数值
    for(var i=1;i<=cols;i++)
    {
        for(var j=1;j<=rows;j++)
        {
            //计算（i,j）在数组中R的坐标值
            pos=[(j*s_height-1)*image.w+(i*s_width-1)]*4;
            //判断R是否符合要求
            if(data[pos]>250)
            {
                var particle={
                    //偏移 x,y随机
                    x: image.x+i*s_width+(Math.random()-0.5)*20,
                    y:image.y+j*s_height+(Math.random()-0.5)*20,
                    fillStyle:'#006eff',
                    count:100,
                    canvasId:'canvas',
                    imgUrl:'image2.jpg',
                    cols:100,
                    rows:100,
                    startX:700,
                    startY:600,
                    imgX:500,
                    imgY:130,
                    delay:100,
                    duration:2000,
                    interval:6,
                    fillStyle:'rgba(26,145,211,1)',
                    currentTime:0
                }
                particles.push(particle);  //符合条件的粒子保存到数组
            }
        }
    }
}
/*
t: 动画执行到当前帧当前时间
b: begInnIng value,  开始值
c: change In value,  结束值 - 开始值（总的位移）
d: duration 总消耗时间（持续时间）
*/
Math.easeInOutQuad=function (t,b,c,d) {
     t/=d/2;
     if(t<1)
     {
         return c/2*Math.pow(2,10*(t-1))+b;
     }
     t--;
     return c/2*(-Math.pow(2,-10*t)+2)+b;
}
//绘制图片
function draw() {
    cxt.clearRect(0,0,cxt.width,cxt.height);
    var len =particles.length;
    var cur_particle=null;
    var cur_x,cur_y;
    var cur_time=0,duration=0,cur_delay=0;
    for(var i=0;i<len;i++)
    {
        //当前粒子
        cur_particle=particles[i];
        //如果单位时间超过delay,开始
        if(cur_particle.count++>cur_particle.delay){
            //设置画布的颜色
            cxt.fillStyle=cur_particle.fillStyle;
            //获得当前的time和持续时间和延时时间
            cur_time=cur_particle.currentTime;//当前时间
            duration=cur_particle.duration; //持续时间
            cur_delay=cur_particle.delay;//延时
            //如果最后一个粒子动画也执行完则停止动画并return
            if(particles[len-1].duration<particles[len-1].currentTime){
                //停止动画
                cancelAnimationFrame(requestId);
                return;
            }
            else if(cur_time<duration) {
                //当前粒子正在运动
                //计算此时的x的坐标
                cur_x = Math.easeInOutQuad(cur_time, cur_particle.x0, cur_particle.x1 - cur_particle.x0, duration);
                //计算此刻的y
                cur_y = Math.easeInOutQuad(cur_delay, cur_particle.y0, cur_particle.y1 - cur_particle.y0, duration);
                //绘制在画布
                cxt.fillRect(cur_x, cur_y, 1, 1);
                //当前时间
                cur_particle.currentTime++;

            }
            else
            {
                //绘制终点在画布
                cxt.fillRect(cur_particle.x1,cur_particle.y1,1,1);
            }
        }
    }
    requestId=requestAnimationFrame(draw);
}